<template>
	<div class="row" style="margin-top: 20px">
		<div class="col-xs-2">
			<ul class="nav nav-pills nav-stacked" style="position:fixed;">
				<li :class="{active: currentView === 'History'}" 
					@click="setView('History')">
					<a class="btn btn-link">History</a>
				</li>
				<li :class="{active: currentView === 'Running'}"  
					@click="setView('Running')" >
					<a class="btn btn-link">Running</a>
				</li>
				<li :class="{active: currentView === 'New'}" 
					@click="setView('New')">
					<a class="btn btn-link">New</a>
				</li>
			</ul>
		</div>
		<div class="col-xs-10">
			<component :is="currentView" :new-exam="currentView = 'Running'"></component>
		</div>
	</div>

</template>

<script>
	import Panel from 'components/Panel.vue' 
	import History from './History.vue'
	import Running from './Running.vue'
	import New from './New/Index.vue'

	import { mapState, mapMutations } from 'vuex'

	export default {
		computed: {
			...mapState('pages/exam', [
				'currentView',
			]),
		},
	    components: {
	    	Panel,
	    	History, Running, New,
	    },
	    methods: {
	    	...mapMutations('pages/exam', [
	    		'setView',
	    	]),
	    },
  	}
</script>

<style scoped>

</style>
